<%@ page import="uk.co.gavin.Person"%>
<%@ page import="uk.co.gavin.Skill" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<!-- http://www.grails.org/plugin/filterpane -->
<filterpane:includes />
<tooltip:resources />
<title>Person List</title>
</head>
<body>
<div class="nav"><span class="menuButton"><g:link
	class="list" action="list">Person List</g:link></span> <span
	class="menuButton"><g:link class="create" action="create">New Person</g:link></span>
<filterpane:filterButton /></div>
<div class="body">
<h1>Person List</h1>
<g:if test="${flash.message}">
	<div class="message">
	${flash.message}
	</div>
</g:if>
<div class="list">
<table width="100%">
	<thead>
		<tr>
			<g:sortableColumn property="created" title="Date Volunteered"
				params="${filterParams}" />
				
			<g:sortableColumn property="firstName" title="First Name"
				params="${filterParams}" />

			<g:sortableColumn property="lastName" title="Last Name"
				params="${filterParams}" />

			<g:sortableColumn property="email" title="Email"
				params="${filterParams}" />

			<g:sortableColumn property="phoneNumber" title="Phone Number"
				params="${filterParams}" />

			<th>Skills</th>
			
			<g:sortableColumn property="core" title="Core" />

			<g:sortableColumn property="employedFullTime"
				title="Employed Full Time" />

		</tr>
	</thead>
	<tbody>
		<g:each in="${personInstanceList}" status="i" var="personInstance">
		  <g:if test="${params.skills == null || personInstance.hasSkillsWithIds(params.skills)}">
			<tr
				onmouseover="tooltip.show('Click to edit ${personInstance.firstName}');"
				onmouseout="tooltip.hide();"
				onclick="window.location = '<g:createLink action='edit' id='${personInstance.id}' />'"
				class="${(i % 2) == 0 ? 'odd' : 'even'}">
				<td>
				${fieldValue(bean: personInstance, field: 'created')}
				</td>
				
				<td>
				${fieldValue(bean: personInstance, field: 'firstName')}
				</td>
				
				<td>
				${fieldValue(bean: personInstance, field: 'lastName')}
				</td>

				<td>
				${fieldValue(bean: personInstance, field: 'email')}
				</td>

				<td>
				${fieldValue(bean: personInstance, field: 'phoneNumber')}
				</td>

				%{-- Skills --}%

				<td>
					${personInstance.skills['name'].join(", ")}
				<td>
				${personInstance.core ? "Yes" : "No"}
				</td>
				<td>
				${personInstance.employedFullTime ? "Yes" : "No"}
				</td>
			</tr>
		   </g:if>
		</g:each>
	</tbody>
</table>
</div>
<div class="paginateButtons"><g:paginate
	total="${personInstanceTotal}" /></div>
</div>

<div id="filterPane"
    class="filterPane "
    style="display:none;"> 
<h2>Filter</h2> 
<form id="filterForm" name="filterForm" action="filter" method="post"> 
<input type="hidden" name="filterProperties" value="lastName,phoneNumber,email,employedFullTime,core,notes,firstName" /> 
<table cellspacing="0" cellpadding="0" class="filterTable"> 
    <tr> 
    <td>First Name</td> 
    <td><select name="filter.op.firstName" id="filter.op.firstName" onChange="filterOpChange('filter.op.firstName', 'firstName');" > 
<option value="" ></option> 
<option value="ILike" >Contains</option> 
<option value="NotILike" >Does Not Contain</option> 
<option value="Like" >Contains (Case Sensitive)</option> 
<option value="NotLike" >Does Not Contain (Case Sensitive)</option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
        <input type="text" name="filter.firstName" value="" id="firstName" onChange="selectDefaultOperator('filter.op.firstName')" />    </td> 
    </tr>    <tr> 
    <td>Last Name</td> 
    <td><select name="filter.op.lastName" id="filter.op.lastName" onChange="filterOpChange('filter.op.lastName', 'lastName');" > 
<option value="" ></option> 
<option value="ILike" >Contains</option> 
<option value="NotILike" >Does Not Contain</option> 
<option value="Like" >Contains (Case Sensitive)</option> 
<option value="NotLike" >Does Not Contain (Case Sensitive)</option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
        <input type="text" name="filter.lastName" value="" id="lastName" onChange="selectDefaultOperator('filter.op.lastName')" />    </td> 
    </tr>    <tr> 
    <td>Email</td> 
    <td><select name="filter.op.email" id="filter.op.email" onChange="filterOpChange('filter.op.email', 'email');" > 
<option value="" ></option> 
<option value="ILike" >Contains</option> 
<option value="NotILike" >Does Not Contain</option> 
<option value="Like" >Contains (Case Sensitive)</option> 
<option value="NotLike" >Does Not Contain (Case Sensitive)</option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
        <input type="text" name="filter.email" value="" id="email" onChange="selectDefaultOperator('filter.op.email')" />    </td> 
    </tr>    <tr> 
    <td>Phone Number</td> 
    <td><select name="filter.op.phoneNumber" id="filter.op.phoneNumber" onChange="filterOpChange('filter.op.phoneNumber', 'phoneNumber');" > 
<option value="" ></option> 
<option value="ILike" >Contains</option> 
<option value="NotILike" >Does Not Contain</option> 
<option value="Like" >Contains (Case Sensitive)</option> 
<option value="NotLike" >Does Not Contain (Case Sensitive)</option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
        <input type="text" name="filter.phoneNumber" value="" id="phoneNumber" onChange="selectDefaultOperator('filter.op.phoneNumber')" />    </td> 
    </tr>    <tr> 
    <td>Notes</td> 
    <td><select name="filter.op.notes" id="filter.op.notes" onChange="filterOpChange('filter.op.notes', 'notes');" > 
<option value="" ></option> 
<option value="ILike" >Contains</option> 
<option value="NotILike" >Does Not Contain</option> 
<option value="Like" >Contains (Case Sensitive)</option> 
<option value="NotLike" >Does Not Contain (Case Sensitive)</option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
        <input type="text" name="filter.notes" value="" id="notes" onChange="selectDefaultOperator('filter.op.notes')" />    </td> 
    </tr>    <tr> 
    <td>Employed Full Time</td> 
    <td><select name="filter.op.employedFullTime" id="filter.op.employedFullTime" onChange="filterOpChange('filter.op.employedFullTime', 'employedFullTime');" > 
<option value="" ></option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
                    <label for="filter.employedFullTime.yes">Yes</label> 
            <input type="radio" name="filter.employedFullTime" value="true" id="filter.employedFullTime.yes" onClick="selectDefaultOperator('filter.op.employedFullTime')"  /> 
            <label for="filter.employedFullTime.no">No</label> 
            <input type="radio" name="filter.employedFullTime" value="false" id="filter.employedFullTime.no" onClick="selectDefaultOperator('filter.op.employedFullTime')"  /> 
                </td> 
    </tr>    <tr> 
    <td>Core</td> 
    <td><select name="filter.op.core" id="filter.op.core" onChange="filterOpChange('filter.op.core', 'core');" > 
<option value="" ></option> 
<option value="Equal" >Equal To</option> 
<option value="NotEqual" >Not Equal To</option> 
</select></td> 
    <td> 
                    <label for="filter.core.yes">Yes</label> 
            <input type="radio" name="filter.core" value="true" id="filter.core.yes" onClick="selectDefaultOperator('filter.op.core')"  /> 
            <label for="filter.core.no">No</label> 
            <input type="radio" name="filter.core" value="false" id="filter.core.no" onClick="selectDefaultOperator('filter.op.core')"  /> 
                </td> 
    </tr></table> 
<div> 
    Order by<select name="sort" id="sort" > 
<option value="">Select a Property</option> 
<option value="firstName" >First Name</option> 
<option value="lastName" >Last Name</option> 
<option value="email" >Email</option> 
<option value="phoneNumber" >Phone Number</option> 
<option value="notes" >Notes</option> 
<option value="employedFullTime" >Employed Full Time</option> 
<option value="core" >Core</option> 
</select>    &nbsp;
    <input type="radio" name="order" value="asc" id="order"  /> 
    &nbsp;Ascending&nbsp;
    <input type="radio" name="order" value="desc" id="order"  /> 
    &nbsp;Descending
</div> 
	<div>

	<h3>Skills</h3> 
            <table>
            <g:each var='s' in='${Skill.getAll()}'> 
           	 <tr class="prop">
                 <td>
					<input type="checkbox" name="skills" value="${s.id}" />  
					${s.name} 
                 </td>
              </tr>   
			</g:each> 
            </table>
            </div>
<div class="buttons"> 
    <span class="button"> 
        <input type="button" value="Cancel" onclick="return hideElement('filterPane');" /> 
    </span> 
    <span class="button"> 
        <input type="button" value="Clear" onclick="return clearFilterPane('filterForm');" /> 
    </span> 
    <span class="button"> 
        <input type="submit" name="_action_filter" value="Apply" /> 
    </span> 
</div> 
</form> 
</div> 
</body>
</html>
